<div id="itemActionsBar">
  <% if (!redisReadOnly) { %>
  <button class="btn" data-toggle="modal" onclick="addSetMember('<%= connectionId %>','<%= key %>')"
          style="margin-right: 5px">Add New Member...
  </button>
  <button class="btn btn-danger" onclick="deleteKey('<%= connectionId %>','<%= key %>')">Delete Key</button>
  <% } %>
  <button id="viewModeStringButton" class="btn" style="display:none;" onclick="dataUIFuncs.onModeStringButtonClick()">View mode string</button>
  <button id="viewModeJsonButton" class="btn" onclick="dataUIFuncs.onModeJsonButtonClick()">View mode tree</button>
</div>
<div id="itemData">
  <label>Key: <b><%= key %></b></label>
  <label>TTL: <b><%= ttl %></b></label>
  <label>Type: <b>Set</b> (<%= members.length %> Members)</label>
  <table class="table">
    <thead>
      <tr><th>Member</th></tr>
    </thead>
    <tbody>
      <% members.forEach(function(member, idx) { %>
        <tr>
          <td id="plain_<%= idx %>" class="text-renderer"><%= member %></td>
          <td id="jqtree_<%= idx %>" class="json-renderer" style="display:none;">loading ...</td>
        </tr>
      <% }) %>
    </tbody>
  </table>
</div>
<script type="text/javascript">
  $(document).ready(function () {
    if (!redisReadOnly) {
      $('.table tbody tr').on('dblclick', function(event) {
        var row = event.currentTarget;
        var member = row.children[0].innerHTML.toString();
        var key = "<%= key %>";
        var connectionId = "<%= connectionId %>";
        editSetMember(connectionId, key, member);
      });
    }

    dataUIFuncs.createJSONViews('td[class="json-renderer"]');
  });
</script>
